<!DOCTYPE html>
<html >

<body class="hold-transition skin-blue sidebar-mini">
	
    <!-- Main content -->
    <section class="content">
		<div class="row" _table="roleMaintain">
			<div class="table-plane">
				<div class="table-header">
	            	<h3 class="table-title">操作台</h3>
	            </div>
	            
	            <div class="button-plane">
					<div class="row">
						<div class="col-xs-4">
							<input type="text" v-model="key1" class="form-control" placeholder="角色名称">
						</div>
						<div class="col-xs-4">
							<select name="status" lay-verify="required"  v-model="key2" class="byking-select">
								<option value="-1" selected>状态</option>
						        <option value="0">禁用</option>
						        <option value="1">启用</option>
							</select>
						</div>
						
						<div>
							<button @click="custom(index,'query')" 
								        class="btn btn-default fa fa-search-plus" 
								        data-toggle="tooltip" 
								        data-original-title="查询">
							</button>
							<button @click="custom(index,'add')" 
								        class="btn btn-default fa fa-plus" 
								        data-toggle="tooltip" 
								        data-original-title="新增">
							</button>
							
							<button @click="refreh" 
								        class="btn btn-default fa fa-rotate-right" 
								        data-toggle="tooltip" 
								        data-original-title="刷新">
							</button>
						</div>
					</div>
				</div>
			</div>
		
			<div class="table-plane">
				<div class="table-header">
	            	<h3 class="table-title">查询结果</h3>
	            </div>

				<table class="byking-table byking-table-bordered">
					<thead  v-if="page != null">
						<tr>
		    				<th>角色姓名</th>
		    				<th>角色信息</th>
		    				<th>状态</th>
		    				<th>创建时间</th>
		    				<th>操作</th>
						</tr>
					</thead>
					<tbody>
		    			<tr v-for="(index,item) in page">
		    				<td>{{item.role_name}}</td>
		    				<td>{{item.role_info}}</td>
		    				<td v-if="item.status==0"><font color="red">禁用</font></td>
		    				<td v-if="item.status==1"><font color="green">启用</font></td>
		    				<td>{{item.create_time}}</td>
		    				<td>
		    				<button @click="custom(index,'modify')" 
								        class="btn btn-default fa fa-pencil" 
								        data-toggle="tooltip" 
								        data-original-title="修改">
							</button>
							<button @click="custom(index,'delete')" 
								        class="btn btn-default fa fa-trash-o" 
								        data-toggle="tooltip" 
								        data-original-title="删除">
							</button>
		    				</td>
		    			</tr>
	    			
		    			<tr class="data-empty" v-if="page == null">
		    				<td colspan=4>没有数据</td>
		    			</tr>
					</tbody>
				</table>
			</div>
		</div>
    </section>

	<!-- page script -->
<script>
	$tableData.addTable($hostconfig.sysAuthHost+"/role/list", "#roleMaintain", function(index, type, event){
		if (type === 'add') {
			var title = "新增角色";
			var url = "authority/role/addrole.html";
			var area = ["500px", "300px"];
			$byking.showModal(title,url,area);
		} else if (type === 'modify') {
			var content = this.page[index];
			var title = "修改【"+content.role_name+"】角色信息";
			var url = "authority/role/modifyrole.html?guid="+content.guid;
			var area = ["500px", "300px"];
			$byking.showModal(title,url,area);
		} else if (type == "delete") {
			var rowNum = index;
			var content = this.page[rowNum];
			var index = layer.confirm("确认删除记录？", {
				  btn: ["确认", "取消"] 
				}, function(index, layero){
					var url = $hostconfig.sysAuthHost+"/role/del?guid="+content.guid;
					$byking.getJSON(url,function(data){
						$tableData.getVue('#roleMaintain').refreh();
						layer.close(index);
					},function(data){
						layer.msg(data.responseJSON.message);
						layer.close(index);
					} );
				});
		
		} else if (type === "query") {
			var vue = $tableData.getVue('#roleMaintain');
			var param = "&role_name="+vue.key1;
			if(vue.key2!=-1){
				param += "&status="+vue.key2;
			}
			vue.setCon(param);
		}
	}, false, 1, ["key1","key2"]);

  
	function refrehRole(){
		$tableData.getVue("#roleMaintain").refreh();
	}
	
</script>

</body>
<script>


</script>
</html>

